import { PropsWithChildren } from "react";
import markdownIt from "markdown-it";

interface IRelationLawItemProps {
  className?: string;
  link?: string;
  info?: any;
}

const md = new markdownIt();
export function RelationLawItem(
  props: PropsWithChildren<IRelationLawItemProps>
) {
  const { link, info } = props;
  return (
    <div
      className="flex flex-col pb-[16px]"
      style={{ borderBottom: "1px solid #e6e8eb" }}
    >
      <div className="flex flex-row items-center my-[4px]">
        {link ? (
          <a
            href={link}
            target="_blank"
            className="outline-none flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[14px] cursor-pointer text-[#2C79F1]"
          >
            {info?.title}
          </a>
        ) : (
          <div className="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[14px] cursor-pointer text-[#2C79F1]">
            {info?.title}
          </div>
        )}
        <div
          style={{
            color: "rgb(0, 181, 120)",
            backgroundColor: "rgba(0, 181, 120, 0.1)",
          }}
          className="h-[22px] flex flex-row items-center px-[12px] text-[14px]"
        >
          现行有效
        </div>
      </div>

      <div className="flex flex-row items-center text-[#8793ab] text-[12px] gap-[8px] py-[12px]">
        <span>{info?.category}</span>
        <span>|</span>
        <span>{info?.platform}</span>
        <span>|</span>
        <span>{info?.publish_date} 公布</span>
        <span>|</span>
        <span>2014-03-15 施行</span>
      </div>

      <div className="bg-[#edeff5] py-[12px] px-[16px] cursor-pointer rounded-[4px]">
        <span className="font-[600]">第二条：</span>
        <span>
          消费者为生活消费需‍要购买、使用商品或者接受服务，其权益受本法保护；本法未作规定的，受其他有关法律、法规保护。
        </span>
      </div>
    </div>
  );
}
